import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:jd_flutter/widget/buy_button.dart';

class ProdContentFirst extends StatefulWidget {
  const ProdContentFirst({super.key});

  @override
  State<ProdContentFirst> createState() => _ProdContentFirstState();
}

class _ProdContentFirstState extends State<ProdContentFirst> {
  @override
  Widget build(BuildContext context) {

    ScreenUtil.init(context, designSize: const Size(750, 1334));

    void showBottomSheet(){
      Get.bottomSheet(
        // isDismissible:false,
        Container(
          color: Colors.white,
          height: 600.h,
          width: double.infinity,
          child: Stack(
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: ListView(
                  children: [
                    Column(
                      children:[
                        Wrap(
                          children: [
                            Container(
                              width: 100.w,
                              child:Padding(
                                padding: EdgeInsets.only(top: 25.h),
                                child: const Text("颜色",style: TextStyle(fontWeight: FontWeight.bold)),
                              )
                            ),
                            Container(
                              width: 610.w,
                              child: Wrap(
                                children: [
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("白色"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("红色"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("黑色"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("紫色"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("蓝色"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("黄色"),padding: EdgeInsets.all(5),),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                        Wrap(
                          children: [
                            Container(
                              width: 100.w,
                              child: Padding(
                                padding: EdgeInsets.only(top: 25.h),
                                child: const Text("内存",style: TextStyle(fontWeight: FontWeight.bold)),
                              )
                            ),
                            Container(
                              width: 610.w,
                              child: Wrap(
                                children: [
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("64g"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("128g"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("256g"),padding: EdgeInsets.all(5),),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                        Wrap(
                          children: [
                            Container(
                              width: 100.w,
                              child: Padding(
                                padding: EdgeInsets.only(top: 25.h),
                                child: const Text("套餐",style: TextStyle(fontWeight: FontWeight.bold)),
                              )
                            ),
                            Container(
                              width: 610.w,
                              child: Wrap(
                                children: [
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("套餐一"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("套餐二"),padding: EdgeInsets.all(5),),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.all(5),
                                    //chip 标签类组件
                                    child: const Chip(label: Text("套餐三"),padding: EdgeInsets.all(5),),
                                  )
                                ],
                              ),
                            )
                          ],
                        )
                      ],
                    )
                  ],
                ),
              ),
              Positioned(
                bottom: 0,
                height: 76.h,
                width: 1.sw,
                child: const Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Expanded(
                      flex: 1,
                      child:BuyButton(
                          color: Color.fromRGBO(253, 1, 0, 0.9),
                          text: "加入购物车"
                      )
                    ),
                    Expanded(
                        flex: 1,
                        child: BuyButton(
                            color: Color.fromRGBO(255, 165, 0, 0.9),
                            text: "立即购买"
                        )
                    )
                  ],
                )
              )
            ],
          ),
        )
      );
    }

    return Container(
      padding: const EdgeInsets.all(5),
      child: ListView(
        children: [
          AspectRatio(
            aspectRatio: 16/9,
            child: Image.network("https://www.itying.com/images/flutter/p1.jpg",fit: BoxFit.cover),
          ),
          Container(
            padding: const EdgeInsets.only(top: 10),
            child: Text("联想ThinkPad 翼480（0VCD） 英特尔酷睿i5 14英寸轻薄窄边框笔记本电脑",
                style: TextStyle(
                    color: Colors.black87, fontSize: 36.sp)),
          ),
          Container(
              padding: const EdgeInsets.only(top: 10),
              child: Text(
                  "震撼首发，15.9毫米全金属外观，4.9毫米轻薄窄边框，指纹电源按钮，杜比音效，2G独显，预装正版office软件",
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: 28.sp))),
          //价格
          Container(
            padding: const EdgeInsets.only(top: 10),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Row(
                    children: <Widget>[
                      const Text("特价: "),
                      Text("¥28",
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: 46.sp)),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      const Text("原价: "),
                      Text("¥50",
                          style: TextStyle(
                              color: Colors.black38,
                              fontSize: 28.sp,
                              decoration: TextDecoration.lineThrough)),
                    ],
                  ),
                )
              ],
            ),
          ),

          //筛选
          Container(
            margin: const EdgeInsets.only(top: 10),
            height: 80.h,
            child: InkWell(
              child: const Row(
                children: <Widget>[
                  Text("已选: ", style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("115，黑色，XL，1件")
                ],
              ),
              onTap: (){
                showBottomSheet();
              },
            ),
          ),
          const Divider(),
          SizedBox(
            height: 80.h,
            child: const Row(
              children: <Widget>[
                Text("运费: ", style: TextStyle(fontWeight: FontWeight.bold)),
                Text("免运费")
              ],
            ),
          ),
          const Divider(),
        ],
      ),
    );
  }
}
